<template>
<div>
    <Sect class="dd"></Sect>
    <div class="dati">
        <header>
            <div class="head" @click="sou">
                <img src="../../assets/search.png" alt="">
                <input type="text" placeholder="">
                <div class="seco">搜索</div>
            </div>
            <div class="multifunction">
                <img src="../../assets/shop_car.png" alt="" @click="car()">
                <img src="../../assets/order.png" alt="" @click="ding">
                <img class="gd" src="../../assets/gengduo.png"  alt="" @click="buy">
            </div>
        </header>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <article>
            <section style="background-color: white;">
                <a href="#">
                    <div class="buy_phone">
                        <img src="https://img.pddpic.com/mms-material-img/2023-03-29/587b717d947eb55acbd4607b743389fc.jpeg?imageView2/2/w/1300/q/80" alt="">
                        <p>潮流购买手机</p>
                    </div>
                </a>
                <a href="#">
                    <div class="new_trend">
                        <img src="https://commimg.pddpic.com/phone_adx/85d972e4-e47d-11ea-b0e4-fa4f31145178.jpg?imageView2/2/w/1300/q/80" alt="">
                        <p>口红唇膏</p>
                    </div>
                </a>
                <a href="#">
                    <div>
                        <img src="https://img.pddpic.com/mms-material-img/2023-01-15/7e99e4d64e879eafed74b8dc3df2c502.jpeg?imageView2/2/w/1300/q/80/format/webp" alt="">
                        <p>腕表</p>
                    </div>
                </a>
                <a href="#">
                    <div>
                        <img src="https://commimg.pddpic.com/auto-image/a72a0160-2e4c-11ec-96a4-0a580a4dc47a.jpg?imageView2/2/w/1300/q/80/format/webp" alt="">
                        <p>户外</p>
                    </div>
                </a>
                <a href="#">
                    <div>
                        <img src="https://commimg.pddpic.com/phone_adx/2f4d2532-79b5-11ec-a41f-0a580a245cb9.jpg?imageView2/2/w/1300/q/80/format/webp" alt="">
                        <p>鼠标键盘</p>
                    </div>
                </a>
                <a href="#">
                    <div>
                        <img src="https://img.pddpic.com/mms-material-img/2022-06-23/061222fd-b011-410a-b433-829a7d338310.jpeg.a.jpeg?imageView2/2/w/1300/q/80" alt="">
                        <p>独特设计</p>
                    </div>
                </a>
                <a href="#">
                    <div>
                        <img src="https://img.pddpic.com/mms-material-img/2023-03-22/678299f6-f313-45d8-9ae7-bc5709b3a38b.jpeg?imageView2/2/w/1300/q/80/format/webp" alt="">
                        <p>定格美好</p>
                    </div>
                </a>
                <a href="#">
                    <div>
                        <img src="https://m.360buyimg.com/babel/jfs/t1/176307/1/24204/34079/61669c9cEca51e61f/e32d0de161b219df.jpg.webp" alt="">
                        <p>春夏四件套</p>
                    </div>
                </a>
                <a href="#">
                    <div>
                        <img src="https://img.pddpic.com/mms-material-img/2022-11-22/080fcd13-d117-4677-ac69-d1f3e98a20c4.jpeg?imageView2/2/w/1300/q/80/format/webp" alt="">
                        <p>家纺</p>
                    </div>
                </a>
                <a href="#">
                    <div>
                        <img src="https://commimg.pddpic.com/phone_adx/2022-05-12/0ac577877ab7a186d3ffbc7c4afaf91f.jpeg?imageView2/2/w/1300/q/80/format/webp" alt="">
                        <p>奇趣充电</p>
                    </div>
                </a>
                
            </section>
                <Page/>
            </article>
            <!-- <div style="width:370px;height: 400px; background-color: aqua;"></div> -->
        </van-pull-refresh>
            </div>
            <van-share-sheet style="height: 320px;" v-model="showShare" title="更多选择" :options="options"/>
    </div>
</template>

<script>
import { Toast } from 'vant';
import Page from '../../components/Shopping_page_shop.vue'
import Sect from '../../components/Sectorization.vue'
// import { showShare } from 'vant';
export default {
    components: {
        Sect,
        Page
      },
  data() {
    return {
      count: 0,
      isLoading: false,
      showShare: false,
      
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
    };
  },
  methods: {
    onRefresh() {
          setTimeout(() => {
              this.$router.go(0)
              this.isLoading = false;
              Toast('刷新成功');
      }, 1000);
    },
    buy(){
        if(this.showShare==false){
            this.showShare=true;
            console.log(123);
        }else{
            this.showShare=false;
            console.log(456);
        }
      },
      car(a) {
      this.$router.push({
        name: "Shopping_trolley",
        params: {
          a: a,
          },
      });
      console.log(a);
    },
      ding() {
        this.$router.push('/order')
      },
      sou() {
        this.$router.push('/Shopping_search')
    }

  },
};
</script>

<style scoped>


#product_exhibition{
    width: 370px;
    background-color: aliceblue;
}
#product_exhibition div{
    height: 300px;
    width: 180px;
    background-color: rgb(255, 255, 255);
    margin-top: 10px;
}
*{
    margin: 0;
    padding: 0;
}
.dd{
    position: relative;
    z-index: 999;
}
.html{
    overflow: hidden;
    background-color: rgb(240, 240, 240);
}
body{
    background-color: rgb(240, 240, 240);
}
header{
    margin-top: 20px;
    border-bottom: 1px solid #ebeaea;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
}
a{
    text-decoration: none;
}
.head{
    width: 220px;
    height: 35px;
    border: 1px solid ;
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.head img{
    width: 20px;
    height: 20px;
}
.head input{
    width: 120px;
    height: 30px;
    border: 0;
}
input{
    background-color: rgb(255, 255, 255);
}
 input[type=text]:focus {
    outline: none;
    background-color: rgb(255, 255, 255);
}
.seco{
    width: 60px;
    height: 30px;
    color: azure;
    background-color:rgb(252, 55, 72);
    line-height: 30px;
    text-align: center;
    border-radius: 20px;
}
.multifunction{
    width: 100px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.multifunction img{
    width: 20px;
    height: 20px;
}
section{
    width: 100%;
    height: 150px;
    margin-top:10px;
    /* background-color: white;  */
}
/* section a{
    background-color: rgb(255, 255, 255);
} */

footer{
    width: 100%;
    height: 43px;
    position: fixed;
    bottom: 0px;
    background-color: rgb(255, 255, 255);
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
p{
    font-size: 20px;
    color: black;
}
footer div{
    width: 60px;
    height: 40px;
    text-align: center;
    line-height: 35px;
    font-size: 40px;
    background-color: rgb(252, 55, 72);
    color: rgb(255, 255, 255);
    border-radius: 13px;
}



.dati{
    width: 100%;
    overflow: hidden;
}
section{
    background-color: rgb(240, 240, 240);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}
section div{
    width: 75px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
section img {
    width: 30px;
    height: 30px;
}
section p{
    font-size: 12px;
}

.dtf{
    color: rgb(190, 189, 189);
}

.aaaa{
    width: 100vw;
    height: 100vh;
    background-color: rgb(0, 0, 0,0.3);
    position: absolute;
    top: 0;
    display: none;
}



.popup{
    width: 100%;
    height: 200px;
    background-color: rgb(247, 247, 247);
    border-radius: 15px;
    padding-top: 20px;
    box-sizing: border-box;
    position: relative;
    position: fixed;
    bottom: 0;
    display: none;
}
.x{
    position: absolute;
    right: 0;
    margin-right: 30px;
    color: rgb(95, 95, 95);
}
.popup p{
    /* margin-top: 50px; */
    color: rgb(95, 95, 95);
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
}
.artmap{
    width:45px;
    height: 45px;
    border-radius: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gwdd{
    height: 80px;
    margin-top: 25px;
    display: flex;
    justify-content: space-around;
}
.gwdd>div>div{
    margin-bottom: 10px;
}

#product_exhibition{
    width: 390px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.yige{
    width: 180px;
    height: 270px;
    background-color: rgb(255, 255, 255);
    border-radius: 7px;
    margin-top: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.yige img{
        width: 100%;
        height: 170px;
}
.goods_name{
    font-size: 15px;
}
.fu1{
    width: 150px;
    display: flex;
}
.shop_price_big{
    width: 171px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}
.fu{
    font-size: 14px;
}
.goods_price{
    font-size: 19px;
    font-weight: 600;
}
.sales{
    font-size: 13px;
    white-space: nowrap;
}
</style>